<template>
  <view class="page">
    <Header
      :title="`单词练习（${currentWordIndex + 1}/${wordList.length}）`"
    ></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="step">
            <view
              class="step_item"
              :class="{
                complete: item.step < currentStep,
                ing: item.step === currentStep,
              }"
              v-for="(item, index) in stepList"
              :key="index"
              @click="handleChangeStep(item.step)"
            >
              <view class="step_line" v-if="index !== 0"> </view>
              <view class="step_num">
                <text>{{ item.step }}</text>
              </view>
              <view class="step_text">
                <text>{{
                  item.step === currentStep
                    ? "进行中"
                    : item.step < currentStep
                    ? "已完成"
                    : "未进行"
                }}</text>
                <view class="step_tips">
                  <text>{{ item.name }}</text>
                  <view class="step_img" v-if="item.step === currentStep">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/cat.gif"
                      mode="scaleToFill"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="box" v-if="wordData">
            <view
              class="word"
              v-if="currentStep !== '6' && currentStep !== '7'"
            >
              <WordInfo
                ref="wordInfo"
                :wordData="wordData"
                :showPronunciation="currentStep !== '2'"
                :showWord="currentStep !== '3' && currentStep !== '4'"
                :showPhonetic="currentStep !== '3'"
                :showParaphrase="currentStep !== '5'"
              ></WordInfo>
            </view>
            <view class="detail">
              <WordStep1
                v-if="currentStep === '1'"
                ref="wordStep1"
                :wordData="wordData"
              ></WordStep1>
              <WordStep2
                v-else-if="currentStep === '2'"
                ref="wordStep2"
                :wordData="wordData"
              ></WordStep2>
              <WordStep3
                v-else-if="currentStep === '3'"
                ref="wordStep3"
                :wordData="wordData"
              ></WordStep3>
              <WordStep4
                v-else-if="currentStep === '4'"
                ref="wordStep4"
                :wordData="wordData"
              ></WordStep4>
              <WordStep5
                v-else-if="currentStep === '5'"
                ref="wordStep5"
                :wordData="wordData"
                @next="nextWord"
              ></WordStep5>
              <WordStep6
                v-else-if="currentStep === '6'"
                ref="wordStep6"
                :chapterId="chapterId"
                :wordList="wordList"
                @confirm="nextStep"
                @learn="learnWord"
              ></WordStep6>
              <WordStep7
                v-else-if="currentStep === '7'"
                ref="wordStep7"
                :chapterId="chapterId"
              ></WordStep7>
            </view>
          </view>
          <view
            class="tips"
            @click="reLearn"
            v-if="currentStep !== '6' && currentStep !== '7'"
          >
            重学
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getJd, getScbList, saveWordJd, resetRec } from "@/api/sync";
import WordInfo from "./WordInfo.vue";
import WordStep1 from "./WordStep1.vue";
import WordStep2 from "./WordStep2.vue";
import WordStep3 from "./WordStep3.vue";
import WordStep4 from "./WordStep4.vue";
import WordStep5 from "./WordStep5.vue";
import WordStep6 from "./WordStep6.vue";
import WordStep7 from "./WordStep7.vue";
export default {
  components: {
    WordInfo,
    WordStep1,
    WordStep2,
    WordStep3,
    WordStep4,
    WordStep5,
    WordStep6,
    WordStep7,
  },
  data() {
    return {
      type: "dclx",
      newwordsId: "",
      bookId: "",
      chapterId: "",
      wordList: [],
      currentWordIndex: 0,
      wordData: null,
      stepList: [
        {
          step: "1",
          name: "听",
        },
        {
          step: "2",
          name: "说",
        },
        {
          step: "3",
          name: "读",
        },
        {
          step: "4",
          name: "写",
        },
        {
          step: "5",
          name: "练",
        },
        {
          step: "6",
          name: "测",
        },
        {
          step: "7",
          name: "考",
        },
      ],
      currentStep: "1",
    };
  },
  onLoad(options) {
    this.type = options.type;
    if (this.type === "dclx") {
      this.bookId = options.bookId;
      this.chapterId = options.chapterId;
      this.getData1();
    } else {
      this.newwordsId = options.id;
      this.getData2();
    }
  },
  methods: {
    getData1() {
      getJd("dclx", this.chapterId).then((res) => {
        this.wordList = res.data.words;
        this.currentStep = res.data.step.toString();
        // this.currentStep = "7";
        this.currentWordIndex = res.data.jd;
        this.getWordInfo();
      });
    },
    getData2() {
      getScbList(this.type).then((res) => {
        let item = res.data.find((item) => item.id === this.newwordsId);
        this.bookId = item.bookId;
        this.chapterId = item.chapterId;
        this.wordList = [item];
        this.currentStep = "1";
        this.currentWordIndex = 0;
        this.getWordInfo();
      });
    },
    getWordInfo() {
      this.wordData = this.wordList[this.currentWordIndex];
    },
    nextWord() {
      let params = {
        chapterId: this.chapterId,
        step: "1",
        type: "dclx",
        wordId: this.wordList[this.currentWordIndex].id,
      };
      saveWordJd(params);
      if (this.currentWordIndex === this.wordList.length - 1) {
        this.currentStep = "6";
        return;
      }
      this.currentWordIndex++;
      this.getWordInfo();
      this.currentStep = "1";
    },
    handleChangeStep(step) {
      if (this.currentStep === step) return;
      if (this.currentStep === "1") {
        if (!this.$refs.wordInfo.isPlayed) {
          this.showTips();
          return;
        }
      } else if (this.currentStep === "2") {
        if (!this.$refs.wordStep2.isCompleted) {
          this.showTips();
          return;
        }
      }
      let list = ["1", "2", "3", "4", "5"];
      if (!list.includes(step)) return;
      this.currentStep = step;
    },
    showTips() {
      this.$playBgAudio("clickError");
      this.$refs.uToast.show({
        title: "请先完成前面未完成的关卡",
        type: "error",
      });
    },
    nextStep(step) {
      if (step === "6") {
        this.currentStep = "7";
      }
    },
    reLearn() {
      resetRec(this.chapterId).then(() => {
        uni.navigateBack({
          delta: 1,
        });
      });
    },
    learnWord(list) {
      let ids = list.map((item) => item.id);
      this.wordList = this.wordList.filter((word) => ids.includes(word.id));
      this.currentWordIndex = 0;
      this.getWordInfo();
      this.currentStep = "1";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./wordPractice";
</style>
